<?xml
	version="1.0"
	encoding="utf-8"
	?>
<xsl:stylesheet
	version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	>
<xsl:output
	method="html"
	encoding="utf-8"
	omit-xml-declaration="yes"
	standalone="no"
	indent="yes"
	media-type="text/html"
	/>

<xsl:param name="theme_name" />
<xsl:param name="theme_path" />

<xsl:template match="/">
	<html>
		<head>
			<!-- REQUIRED SCRIPTS AND STYLES -->
			<link rel="stylesheet" type="text/css" href="http://localhost/richrssreader/js/jquery/jstree/tree_component.css" />
			<link type="text/css" href="http://localhost/richrssreader/js/jquery/jqueryui/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
			
		
			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jstree/_lib/css.js"></script>
			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jquery-1.3.2.min.js"></script>

			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jstree/tree_component.js"></script>

			<!-- required for xml data type -->
			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jstree/_lib/sarissa.js"></script>

			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jstree/_lib/sarissa_ieemu_xpath.js"></script>
			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jquery.xslt.js"></script>
			<!-- required for metadata rule definitions -->
			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jquery.metadata.js"></script>

			<!-- required for cookie functionality -->
			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jquery.cookie.js"></script>
			
			<!-- jQueryUI -->
			<script type="text/javascript" src="http://localhost/richrssreader/js/jquery/jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
		</head>
		<body>
			<div id="opmllist" class="tree" style="height: 100%;">
				<xsl:call-template name="nodes">
					<xsl:with-param name="node" select="/opml/body" />
					<xsl:with-param name="theme_name" select="$theme_name" />
					<xsl:with-param name="theme_path" select="$theme_path" />
				</xsl:call-template>
			</div>
			<div id="confirm-delete" title="Confirmation de suppression">
				Êtes-vous sûr de vouloir supprimer l'élément ?
			</div>
			<script type="text/javascript">
			$(function(){
				$("#opmllist").tree({
					data  : {
						type  : "predifined", // or "xml_nested" or "xml_flat"
					}, 
					ui : {
						hover_mode : true
					},
					rules : {
						draggable : "all",
						deletable : "all"
					}
				});
				var isCtrl = false;
				var isShift = false;
				var isAlt = false;
				$(document).keyup(function (e) {
					update_debug(e);
					if(e.which == 16) isShift=false; 
					if(e.which == 17) isCtrl=false; 
					if(e.which == 18) isAlt=false; 
				}).keydown(function (e) { 
					update_debug(e);
					
					//alert(e.which);
					if(e.which == 16) isShift=true; 
					if(e.which == 17) isCtrl=true; 
					if(e.which == 18) { isAlt=true; return false; }
				}); 
				$(document).keypress(function (e) {
					var key = e.charCode || e.keyCode || 0;
					if (key == 46) { // touche delete
						$('#confirm-delete').dialog('open');
					} else if (key == 40 &amp;&amp; !isCtrl) { // touche du bas
						$.tree_reference('opmllist').get_next();
					} else if (key == 38 &amp;&amp; !isCtrl) { // touche du haut
						$.tree_reference('opmllist').get_prev();
					} else if (key == 40 &amp;&amp; isCtrl) { // CTRL+bas
						log('CTRL+BAS');
						$.tree_reference('opmllist').moved($.tree_reference('opmllist').select_branch(), $.tree_reference('opmllist').get_next(false), 'after', true, false);
						$.tree_reference('opmllist').refresh();
					} else if (key == 38 &amp;&amp; isCtrl) { // CTRL+haut 
						log('CTRL+HAUT');
						$.tree_reference('opmllist').moved($.tree_reference('opmllist').select_branch(), $.tree_reference('opmllist').get_prev(false), 'before', true, false);
						$.tree_reference('opmllist').refresh();
					} else if (key == 39) { // touche du droite
						$.tree_reference('opmllist').get_right();
					} else if (key == 37) { // touche du gauche
						$.tree_reference('opmllist').get_left();
					} else if (key == 13) { // touche entrée
						$.tree_reference('opmllist').select_branch();
					} else if (key == 113) { // touche F2
						$.tree_reference('opmllist').rename();
					} else if (key == 99 &amp;&amp; isCtrl) { // touche CTRL+C
						$.tree_reference('opmllist').copy();
					} else if (key == 115 &amp;&amp; isCtrl) { // touche CTRL+S
						//empêche l'enregistrement de la page...
						return false;
					} else if (key == 118 &amp;&amp; isCtrl) { // touche CTRL + V
						$.tree_reference('opmllist').paste();
					} else if (key == 120 &amp;&amp; isCtrl) { // touche CTRL + x
						$.tree_reference('opmllist').paste();
					} else if (key == 119 &amp;&amp; isCtrl) { // touche CTRL + w
						return false; // empêche la fermeture de la fenêtre ou de l'onglet
					} else {
						// recherche du mot 'other' : $.tree_reference('demo5').search('other');
						//$('#debug-key').html("keycode = "+key+"&lt;br/&gt;isCtrl = "+isCtrl+"&lt;br/&gt;isShift = "+isShift+"&lt;br/&gt;isAlt = "+isAlt);
					}
				});
				function update_debug(e) {
					var key = e.charCode || e.keyCode || 0;
					$('#debug-key').html("keycode = "+key+"&lt;br/&gt;isCtrl = "+isCtrl+"&lt;br/&gt;isShift = "+isShift+"&lt;br/&gt;isAlt = "+isAlt);
				}
				function log(message) {
					$('#log').prepend(message+'&lt;br/&gt;');
				}
				
				// Dialog			
				$('#confirm-delete').dialog({
					autoOpen: false,
					width: 500,
					draggable: false,
					resizable: false,
					modal: true,
					buttons: {
						"Non": function() { 
							$(this).dialog("close"); 
						}, 
						"Oui": function() { 
							$.tree_reference('opmllist').remove();
							$(this).dialog("close"); 
						} 
					}
				});
			});
			</script>
			<div id="debug-key" style="top: 0px; right: 0px; width: 300px;height: 300px; position: absolute;"></div>
			<div id="log" style="top: 300px; right: 0px; width: 300px;height: 300px; position: absolute;overflow: auto;"></div>
		</body>
	</html>
</xsl:template>

<xsl:template name="nodes">
	<xsl:param name="node" />
	<xsl:param name="theme_name" />
	<xsl:param name="theme_path" />

	<ul>
	<xsl:for-each select="$node/outline">
		<xsl:variable name="children" select="count(./outline) &gt; 0" />
		<li>
		<xsl:attribute name="class">
			<xsl:if test="position() = last()"> last </xsl:if>
			<xsl:choose>
				<xsl:when test="@state = 'open'"> open </xsl:when>
				<xsl:when test="$children or @hasChildren"> closed </xsl:when>
				<xsl:otherwise> leaf </xsl:otherwise>
			</xsl:choose>
			<xsl:value-of select="@class" />
		</xsl:attribute>
		<xsl:for-each select="@*">
			<xsl:if test="name() != 'class' and name() != 'state' and name() != 'hasChildren' and name() != 'text' and name() != 'xmlUrl'">
				<xsl:attribute name="{name()}"><xsl:value-of select="." /></xsl:attribute>
			</xsl:if>
			<xsl:if test="name() = 'xmlUrl'">
				<xsl:attribute name="rel"><xsl:value-of select="." /></xsl:attribute>
			</xsl:if>
		</xsl:for-each>
		<xsl:for-each select="@text">
			<a href="#">
				<xsl:attribute name="class"><xsl:value-of select="@lang" /> <xsl:value-of select="@class" /></xsl:attribute>
				<xsl:attribute name="style">
					<xsl:value-of select="@style" />
					<xsl:if test="string-length(attribute::icon) > 0 and $theme_name != 'themeroller'">
						background-image:url(
							<xsl:if test="not(contains(@icon,'/'))">
								<xsl:value-of select="$theme_path" />
							</xsl:if>
							<xsl:value-of select="@icon" />
						);
					</xsl:if>
				</xsl:attribute>
				<xsl:for-each select="@*">
					<xsl:if test="name() != 'style' and name() != 'class'">
						<xsl:attribute name="{name()}"><xsl:value-of select="." /></xsl:attribute>
					</xsl:if>
				</xsl:for-each>
				<xsl:if test="$theme_name = 'themeroller' and string-length(attribute::icon) > 0">
					<ins>
					<xsl:attribute name="class">ui-icon <xsl:value-of select="@icon" /></xsl:attribute>
					</ins>
				</xsl:if>
				<xsl:value-of select="current()" />
			</a>
		</xsl:for-each>

		<xsl:if test="$children or @hasChildren">
			<xsl:call-template name="nodes">
				<xsl:with-param name="node" select="current()" />
				<xsl:with-param name="theme_path" select="$theme_path" />
				<xsl:with-param name="theme_name" select="$theme_name" />
			</xsl:call-template>
		</xsl:if>
		</li>
	</xsl:for-each>
	</ul>
</xsl:template>
</xsl:stylesheet>